<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			ul{
				width: 500px;
				border: 10px solid red;
				/*设为弹性容器*/
				display: flex;
				margin: 100px auto;
			
			}
			
			li{
				width: 200px;
				height: 100px;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				background-color: #bfa;
				/*弹性的增长系数*/
				flex-grow: 1;
				
				/*弹性元素的缩减系数
				 		-缩减系数的计算方式比较复杂
				 		-缩减多少是根据 缩减系数 和元素大小来计算
				 		*/
				flex-shrink: 1;
				
				
				/*
				 元素基础长度
				  flex-basis指定的是元素在主轴上的基础长度
				   如果主轴是 横向的 则该值指定的就是元素的宽度
				   如果主轴是 纵向的 则该值指定的就是元素的高度
				     -默认值是 auto，表示参考元素自身的高度或宽度
				     -如果传递了一个具体的树脂，则以该值为准
				     */
				flex-basis: auto;
				/*
				 flex可以设置弹性元素的所有三个样式
				   flex 增长 缩减 基础；
				     initial flex：0 1 auto；
				     auto    flex：1 1 auto；
				     none    flex：0 0 auto 弹性元素没有弹性
				   
				*/
				flex:initial;
			}
			
			li:nth-child(1){
				order: 3;
				/*order决定弹性元素的排列顺序*/
			}
			li:nth-child(2){
				background-color:pink;
				order: 2;
			}
			
			li:nth-child(3){
				background-color:skyblue;
				order: 1;
			}
		</style>
	</head>
	<body>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>
